﻿@using AiXiu.Model
@model TBUsers
@{
    ViewBag.Title = "Index";
    string avatar = !string.IsNullOrEmpty(Model.Avatar) ? Model.Avatar : "/imgs/avatar.jpg";
    string nickName = Model.NickName;
    string sex = "";
    if (Model.Sex == 1)
    {
        sex = "小哥哥";
    }
    else if (Model.Sex == 2)
    {
        sex = "小姐姐";
    }
    else
    {
        sex = "未知";
    }
    string sexColor = Model.Sex == 1 ? "bg-color-blue" : "bg-color-pink";
    string address = !string.IsNullOrEmpty(Model.Address) ? Model.Address : "未知地";
    string birth = Model.Birthday.HasValue ? Model.Birthday.Value.ToString("MM-dd") : "未设置";
    string hobby = !string.IsNullOrEmpty(Model.Hobby) ? Model.Hobby : "未添加";
}

<style>
    .personal {
        margin-top: 0;
    }

        .personal .avatar {
            width: 6em;
            height: 6em;
            overflow: hidden;
            position: relative;
        }

            .personal .avatar img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }

            .personal .avatar .edit {
                width: 22px;
                height: 22px;
                display: inline-block;
                padding: 4px;
                background: rgba(255,255,255,0.5);
                border-radius: 50%;
                position: absolute;
                z-index: 999;
                top: 0;
                right: 0;
            }

        .personal .nickname {
            display: inline-block;
            line-height: 1.6em;
        }

        .personal .sex {
            display: inline-block;
            width: 5em;
            font-size: 0.8em;
            line-height: 1.6em;
            border-radius: 0.8em;
            text-align: center;
            color: #ffffff;
        }
</style>
<div class="page" data-page="personal">
    <div class="page-content">
        <div class="block block-strong personal margin-top-none">
            <div class="row">
                <div class="col-30">
                    <div class="avatar float-right">
                        <a class="edit external edit" href="@Url.Action("AvatarEdit", "Personal")">
                            <i class="f7-icons text-color-gray size-22">camera_viewfinder</i>
                        </a>
                        <img id="imgAvatar" src="@avatar" />
                    </div>
                </div>
                <div class="col-70">
                    <div class="row">
                        <div class="col-100 margin-top-quarter margin-bottom-half">
                            <a href="@Url.Action("PersonalEdit","Personal")" class="external">
                                <i class="f7-icons float-right size-22 text-color-gray">gear</i>
                            </a>
                            <label class="nickname" id="lblNickName">@nickName</label>
                            <label class="sex margin-left @sexColor" id="lblSex">@sex</label>
                        </div>
                        <div class="col-60">
                            <p class="margin-top-quarter margin-bottom-quarter">
                                <i class="f7-icons size-14 text-color-gray margin-right-half">placemark</i>
                                <label id="lblAddress">@address</label>
                            </p>
                        </div>
                        <div class="col-40">
                            <p class="margin-top-quarter margin-bottom-quarter">
                                <i class="f7-icons size-14 text-color-gray margin-right-half">gift</i>
                                <label id="lblBirthday">@birth</label>
                        </div>
                        <div class="col-100">
                            <p class="margin-top-quarter margin-bottom-quarter">
                                <i class="f7-icons size-14 text-color-gray margin-right-half">heart</i>
                                <label id="lblHobby">@hobby</label>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="list">
            <ul>
                <li>
                    <a href="@Url.Action("Friends","Personal")" class="item-link item-content external">
                        <div class="item-media"><i class="f7-icons">person_2</i></div>
                        <div class="item-inner">
                            <div class="item-title">我的好友</div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="list">
            <ul>
                <li>
                    <a href="@Url.Action("MyVideos","Video")" class="item-link item-content external">
                        <div class="item-media"><i class="f7-icons">play_rectangle</i></div>
                        <div class="item-inner">
                            <div class="item-title">我的视频</div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="@Url.Action("Publish","Video")" class="item-link item-content external">
                        <div class="item-media"><i class="f7-icons">camera</i></div>
                        <div class="item-inner">
                            <div class="item-title">发布视频</div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="toolbar tabbar tabbar-labels toolbar-bottom">
    <div class="toolbar-inner">
        <a href="@Url.Action("Index","Home")" class="tab-link external">
            <i class="icon f7-icons size-29">videocam</i>
            <span class="tabbar-label">视频</span>
        </a>
        <a href="@Url.Action("Index","Friends")" class="tab-link external">
            <i class="icon f7-icons size-22">bubble_left_bubble_right</i>
            <span class="tabbar-label">聊天</span>
        </a>
        <a href="@Url.Action("Index","Personal")" class="tab-link external tab-link-active">
            <i class="icon f7-icons size-25">person</i>
            <span class="tabbar-label">我的</span>
        </a>
    </div>
</div>